:ruby
  js_data = {
    :csspath => field.css_location,
    :jspath => field.js_location,
    :options => field.config,
    :locations => field.assets
  }

  editor_size = {
    width: 'auto',
    heigth: '300px',
  }

  if field.html_attributes[:cols]
    if field.html_attributes[:cols].to_s.match('%')
      editor_size[:width] = field.html_attributes[:cols]
    else
      editor_size[:width] = "#{field.html_attributes[:cols].to_i * 8}px"
    end
  end

  if field.html_attributes[:rows]
    if field.html_attributes[:rows].to_s.match('%')
      editor_size[:heigth] = field.html_attributes[:rows]
    else
      editor_size[:heigth] = "#{field.html_attributes[:rows].to_i * 20}px"
    end
  end

- uniqid = "code_mirror_#{SecureRandom.hex(10)}"

:css
  ##{uniqid} .CodeMirror {
    width: #{editor_size[:width]};
    height: #{editor_size[:heigth]};
  }

:javascript
  $(document).on('click', '##{uniqid} .nav.nav-tabs li a', function(e){
      $('##{uniqid} .tab-content '+ $(this).attr('href') + ' .CodeMirror').each(function(i, el){
          el.CodeMirror.refresh();
      });
  });

%div{id: uniqid}
  = render 'form', form: form, field: field, field_type: :text_area, html_attributes: field.html_attributes.reverse_merge(:data => { :richtext => 'codemirror', :options => js_data.to_json })
